<template>
  <div class="container">

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#" @click="f1">商品管理</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
              aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="#" @click="f2">商品添加</a>
          </li>
        </ul>
        <form action="/index#/goodsManager" class="form-inline my-2 my-lg-0">
          <input v-model="goodsNameSearch" v-on:keyup="queryGoodsByName" class="form-control mr-sm-2" type="search"
                 placeholder="按名称搜索" aria-label="Search">
          <!--          <button v-on:click="queryGoodsByName" class="btn btn-outline-success my-2 my-sm-0" type="button">Search</button>-->
        </form>
      </div>
    </nav>


    <div v-if="biao == 1" class="row d1 justify-content-center">
      <div class="col-3 d2" v-for="i in ls">
        <div class="row border rounded">
          <div class="col">
            <div class="row justify-content-center">
              <div class="col">
                <img v-bind:src="'/upload_images/' + i.image" alt="商品图片">
              </div>
            </div>
          </div>
          <div class="w-100"></div>
          <div class="col">
            <div class="row detail">
              <div class="col">
                <span>{{ i.name }}</span>
              </div>
              <div class="col">
                <span>￥{{ i.price }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-else-if="biao == 2" class="row d1 justify-content-center">
      <div class="col-12">
        <form id="f" action="/addGoods" method="post" enctype="multipart/form-data">
          <div class="form-group">
            <label>商品名称：</label>
            <input type="text" name="name" class="form-control" required/>
          </div>
          <div class="form-group">
            <label>价格：</label>
            <input type="text" name="price" class="form-control" required/>
          </div>
          <div class="form-group">
            <label>商品图片:</label>
            <div class="custom-file">
              <input type="file" name="image" class="custom-file-input" @change="handleFiles" required/>
              <label class="custom-file-label" for="customFile">{{filename}}</label>
            </div>
          </div>
          <button class="btn btn-primary">添加</button>
        </form>
      </div>

    </div>

    <div v-else-if="biao == 3" class="row d1 justify-content-center">
      <div class="col-12 d2" v-for="i in ls">
        <div class="biao3d1 row align-content-center border rounded">
          <div class="col">
            <img v-bind:src="'/upload_images/' + i.image" alt="商品图片">
          </div>
          <div class="col">
            <span>{{ i.name }}</span>
          </div>
          <div class="col">
            <span>￥{{ i.price }}</span>
          </div>
          <div class="col">
            <span><a :href="'/deleteGoodsById/' + i.id">删除</a></span>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
module.exports = {
  data() {
    return {
      goodsNameSearch: '',
      ls: null,
      biao: 1,
      filename:"img"
    }
  },
  mounted() {
    axios.get("/queryAllGoodsList").then(response => (this.ls = response.data))
  },
  methods: {
    f1() {
      this.biao == 1 ? this.biao = 3 : this.biao = 1
    },
    f2() {
      this.biao = 2
    },
    queryGoodsByName() {
      if (this.goodsNameSearch == "") {
        axios.get("/queryAllGoodsList").then(response => (this.ls = response.data))
      } else {
        axios.get("/queryGoodsByName/" + this.goodsNameSearch).then((response) => (this.ls = response.data))
      }
    },
    handleFiles(event){
      this.filename = event.target.files[0].name
      console.log(this.filename);
    }
  }
}
</script>
<style scoped>
.d2 {
  padding: 10px 30px;
}

.d2 img {
  width: 220px;
  height: 220px;
}

.detail {
  font-size: 1.5em;
  text-align: center;
}

.biao3d1 img {
  height: 100px;
  width: 100px;
}

.biao3d1 > div {
  height: 100px;
  width: 100px;
  line-height: 100px;
}
</style>


